/**
 * Created by zhouaqian on 2017/4/18.
 */
var React = require('react');

var Bheader = require('../widget/Bheader');
var Footer = require('../widget/Footer');
var GoodSwiper = require('../widget/GoodSwiper');
var ajax = require('../tools/ajax');
var IncreaseId = require('../../web/tools/IncreaseId');
var MsgBox = require('../components/MsgBox');

module.exports = React.createClass({
    getInitialState: function () {
        return {
            theme:"Default",
            list_info:{},
            goods_id:"",
            leftTime:"",//剩余秒数
            remainingTime:""//具体时间
        }
    },
    myScroll:"",
    timer:null,

    componentDidMount: function () {
        var newGoodId = localStorage.getItem("newGoodId");
        this.getNewGoodsDetailByid(newGoodId);
        this.iscroll();
    },
    /**iScroll插件*/
    iscroll(){
        var p =this;
        p.myScroll = new IScroll("#newGoodDetailWrapper",{
            // 默认iscroll会拦截元素的默认事件处理函数，我们需要响应onClick，因此要配置
            preventDefault: false,
            // 禁止缩放
            zoom: false,
            // 支持鼠标事件，因为我开发是PC鼠标模拟的
            mouseWheel: true,
            // 滚动事件的探测灵敏度，1-3，越高越灵敏，兼容性越好，性能越差
            probeType: 3,
            // 拖拽超过上下界后出现弹射动画效果，用于实现下拉/上拉刷新
            bounce: true,
            // 展示滚动条
            scrollbars: false
        });
    },

    componentWillUnmount:function(){
        if(this.timer){
            clearInterval(this.timer);
            this.timer = null;
        }
    },

    /**获取新品商品详情信息 */
    getNewGoodsDetailByid(newGoodId){
        var p = this;
        ajax("POST","getNewGoodsDetailByid",{newGoodId:newGoodId},function(dt){
            if(dt && dt.success){
                var objs = dt.data[0];
                var leftTime = (new Date(objs.action_end_time) - new Date())/1000;//计算相差的秒数
                p.setState({
                    list_info : objs,
                    leftTime : leftTime
                },()=>{p.leftTimer()});
            }
        });
    },

    /**报名 */
    baoming: function () {
        var p = this;
        var userId = localStorage.getItem('userId');
        if(userId){
            var id = IncreaseId.increaseId();
            // baoming接口
            p.refs.MsgBox.setState({
                type: "no",
                timeout:3000,
                show:true,
                word:"报名成功"
            });
        } else{
            location.href = '#login';
        }
    },


    //剩余时间计算
    leftTimer(){
        var p=this;
        var leftTime = this.state.leftTime;
            this.timer = setInterval(function () {
                leftTime -= 1;
                var days = parseInt(leftTime / 3600 / 24, 10); //计算剩余的天数
                var hours = parseInt(leftTime / 3600 % 24, 10); //计算剩余的小时
                var minutes = parseInt(leftTime / 60 % 60, 10);//计算剩余的分钟
                var seconds = parseInt(leftTime % 60, 10);//计算剩余的秒数
                hours = p.checkTime(hours);
                minutes = p.checkTime(minutes);
                seconds = p.checkTime(seconds);
                var remainingTime = days + "天" + hours + "小时" + minutes + "分" + seconds + "秒";
                p.setState({remainingTime: remainingTime});
                if (leftTime == 0) {
                    clearInterval(timer);
                }
            }, 1000);

    },
    //将0-9的数字前面加上0，例1变为01
    checkTime(i){
        if(i<10)
        {
            i = "0" + i;
        }
        return i;
    },

    render: function () {
        var p = this;
        var list_info =this.state.list_info;
        if(list_info.goods_img) {
            var goods_img = list_info.goods_img.split(",");
        }
        if(list_info.original_img){
            var i=-1;
            var imgList = list_info.original_img.split(",").map(function (obj) {
                i++;
                return (
                    <img key={i} src={obj}/>
                )
            });
        }
        return (
            <div className="main"  id="main">
                <Bheader theme={p.state.theme} title="新品预售产品详情" hact="#xinpin"></Bheader>
                <div id="newGoodDetailWrapper" className="container-t wrap">
                    <div  style={{minHeight:"28.66rem"}} className="goods_detail">
                        <div className="goods_con">
                            <GoodSwiper ref="goodSwiper" goods_img={goods_img}></GoodSwiper>
                            <p className="goods_name" ref="goodname">
                                {list_info.goods_name}
                            </p>
                            <p className="goods_price">
                                ￥<span className="price">{list_info.shop_price}</span>
                            </p>
                            <hr className="orderHr"></hr>
                            <div className="pro-baoming">
                                <p className="title">报名情况:</p>
                                <ul>
                                    <li>
                                        已报名：<span className="BmColor">{list_info.person_number}人</span>
                                    </li>
                                    <li className="timer">
                                        剩余时间：<span className="BmColor">{p.state.remainingTime}</span>
                                    </li>
                                </ul>
                            </div>
                            <div className="goods_info newGoodsInfo">
                                <p className="title">商品信息:</p>
                                <ul>
                                    <li className="left">
                                        品牌：<span className="infoBold">{list_info.brand_name}</span>
                                    </li>
                                    <li className="right">
                                        规格：<span className="infoBold">{list_info.goods_guige}</span>
                                    </li>
                                    <li className="left">
                                        产地：<span className="infoBold">{list_info.gc_name}</span>
                                    </li>
                                    <li className="right">
                                        产品剂型：<span className="infoBold"></span>
                                    </li>
                                    <li className="left">
                                        库存：<span className="infoBold">{list_info.goods_number}</span>
                                    </li>
                                </ul>
                            </div>
                            <div className="pro-detail">
                                <p className="title">详情:</p>
                                {imgList}
                            </div>
                        </div>
                    </div>
                </div>
                <div className="goods_btn newBtn" onClick={p.baoming}>
                    <div className="goods_addcart" data={list_info.id}>
                        报名
                    </div>
                </div>
                <MsgBox ref="MsgBox"></MsgBox>
            </div>
        )
    }
});